<!DOCTYPE html>
<html lang="en" class="app" xmlns:th="http://www.thymeleaf.org">
<head>  
  <meta charset="utf-8" />
  <title>Musik | Web Application</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="/js/jPlayer/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="/css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="/css/animate.css" type="text/css" />
  <link rel="stylesheet" href="/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="/css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="/css/font.css" type="text/css" />
  <link rel="stylesheet" href="/css/app.css" type="text/css" />

<!--  <link rel="stylesheet" href="/bootstrapPage/bootstrap.min.css">-->


    <!--[if lt IE 9]>
    <script src="/js/ie/html5shiv.js"></script>
    <script src="/js/ie/respond.min.js"></script>
    <script src="/js/ie/excanvas.js"></script>
  <![endif]-->
    <style>
        .VideoHeight{
            width: auto;height: 70px;border-radius:0;display: block;
        }
        .black{
            background-color: #0d1215;
        }
    </style>
</head>
<body class="">
  <section class="vbox">
<!--    顶部-->
    <div th:replace="~{commons/commons::top}"></div>

    <section>
      <section class="hbox stretch">


<!--左侧边栏-->
        <div th:replace="~{commons/commons::cebian}"></div>


        <!-- /.aside -->
        <section id="content">
          <section class="hbox stretch">
            <section>
              <section class="vbox">

<!--                主文部分-->
                <div id="ajaxContent" th:replace="~{index::index}"></div>

<!--                底部播放-->
                <div th:replace="~{commons/commons::bottom}"></div>


              </section>
            </section>



            <!-- / side content -->
          </section>
          <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
        </section>


      </section>
    </section>    
  </section>
  <script src="/js/jquery-3.4.1.min.js"></script>
  <!-- Bootstrap -->
  <script src="/js/bootstrap.js"></script>
  <!-- App -->
  <script src="/js/app.js"></script>
  <script src="/js/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="/js/app.plugin.js"></script>
  <script type="text/javascript" src="/js/jPlayer/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="/js/jPlayer/add-on/jplayer.playlist.min.js"></script>

<!--  <script type="text/javascript" src="js/jPlayer/demo.js" charset="UTF-8"></script>-->

<!--  <script type="text/javascript" src="/js/audio-fei.js"></script>-->
  <div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>

  <script src="/js/fei-ajax.js"></script>


<!--  <script src="/bootstrapPage/bootstrap.min.js"></script>-->
  <script src="/bootstrapPage/bootstrap-pagination-spirit.js"></script>

  <script type="text/javascript" src="/bootstrapPage/video-detail-page.js"></script>

<!--  用于播放的-->
  <script th:inline="javascript">
    $(document).ready(function(){

      var myPlaylist = new jPlayerPlaylist({
        jPlayer: "#jplayer_N",
        cssSelectorAncestor: "#jp_container_N"
      }, [[${session.FileAudioBeanList}]], {
        playlistOptions: {
          enableRemoveControls: true,
          autoPlay: false
        },
        swfPath: "js/jPlayer",
        supplied: "webmv, ogv, m4v, oga, mp3",
        smoothPlayBar: true,
        keyEnabled: true,
        audioFullScreen: false
      });
        
      $(document).on($.jPlayer.event.pause, myPlaylist.cssSelector.jPlayer,  function(){
        $('.musicbar').removeClass('animate');
        $('.jp-play-me').removeClass('active');
        $('.jp-play-me').parent('li').removeClass('active');
      });

      $(document).on($.jPlayer.event.play, myPlaylist.cssSelector.jPlayer,  function(){


        //让其他音频（audio）停止播放
        $("audio").each(function(index,element){
          $(element).addClass("pause").removeClass("play");
          $(element).next().addClass("icon-control-play").removeClass("icon-control-pause");
          if((index+1) != $("audio").length){
            $(element)[0].pause();
          }
        });
        $('.musicbar').addClass('animate');
      });



      $(document).on('click', '.jp-play-me', function(e){
        e && e.preventDefault();
        var $this = $(e.target);
        if (!$this.is('a')) $this = $this.closest('a');

        $('.jp-play-me').not($this).removeClass('active');
        $('.jp-play-me').parent('li').not($this.parent('li')).removeClass('active');

        $this.toggleClass('active');
        $this.parent('li').toggleClass('active');
        if( !$this.hasClass('active') ){
          myPlaylist.pause();
        }else{
          var i = Math.floor(Math.random() * (1 + 7 - 1));
          myPlaylist.play(i);
        }

      });




      // video
      $("#jplayer_1").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", [[${MvMusic}]]);
        },
        swfPath: "js",
        supplied: "m4v",
        size: {
          width: "100%",
          height: "auto",
          cssClass: "jp-video-360p"
        },
        globalVolume: true,
        smoothPlayBar: true,
        keyEnabled: true
      });


      //别问我为什么写在这里
      //  要是jplayer写在别的地方可以动态加入歌单就爽了，在这里占地方，看了就烦
      //首页点击添加歌单
      $(document).on('click','.addSongSinger',function () {
          var songerName = $(this).parent().parent().parent().next().children(".feiAdd").text();
          $.ajax({
              url: '/user/addBroadcast',
              data: 'songerName=' + songerName,
              method: 'post',
              success: function (data) {
                  if (data != null && data != '') {
                      myPlaylist.add(data);
                  }
              }
          });
      });

//    用于listen添加用户歌单
        $(document).on('click','.addSongSinger2',function () {
            var songerName = $(this).parent().next().next().children("span").text();
            $.ajax({
                url: '/user/addBroadcast',
                data: 'songerName=' + songerName,
                method: 'post',
                success: function (data) {
                    if (data != null && data != '') {
                        myPlaylist.add(data);
                    }
                }
            });
        });

    });




//

//以下用于audio
//其他音频播放时，前一个音频停止
    var audios = document.getElementsByTagName("audio");
    // 暂停函数
    function pauseAll() {
      var self = this;
      [].forEach.call(audios, function (i) {
        // 将audios中其他的audio全部暂停
        i !== self && i.pause();
      })
    }
    // 给play事件绑定暂停函数
    [].forEach.call(audios, function (i) {
      i.addEventListener("play", pauseAll.bind(i));
    });

    //用于audio可以直接看audio-fei.js
    $(document).on('click','.audio',function () {
        pauseAll();

        var audio = $(this).children("audio");
        var audioI = $(this).children("i");
        // 有play这个类名代表在播放中
        if(audio.hasClass("play")){
            audio.addClass("pause").removeClass("play");
            audioI.addClass("icon-control-play").removeClass("icon-control-pause");
            //pause():audio的对象方法
            audio[0].pause();
        }else{
            //先将所有的图标变成暂停
            $("audio").each(function(index,element){
                $(element).addClass("pause").removeClass("play");
                $(element).next().addClass("icon-control-play").removeClass("icon-control-pause");
            });
            audio.addClass("play").removeClass("pause");
            audioI.addClass("icon-control-pause").removeClass("icon-control-play");
            //play():audio的对象方法
            audio[0].play();
        }
    });


  //  用于video-detail中的评论提交
      $(document).on("click","#form-button",function(){
          var f = $("form").serialize();
          $.ajax({
              url: '/user/ajax/videoCommentInsert',
              type: 'Post',
              data: f,
              success:function (data) {
                  //重置表单
                  $("#commentTextarea").val("");
                  $(".fei-comment").each(function () {
                        var commenCount = $(this).text();
                        //为了不用转类型
                        commenCount = commenCount*1 + 1;
                        $(this).text(commenCount);
                  });
                  //重置分页（设计的不够好,不应该每次都刷新）
                  initSpiritPagination(data.total,data.pages,data.pageSize);

                  if(data.pages != 1){
                      var pages = $(".page-link").length;
                      var pagesText;
                      $(".page-link").each(function (index,element) {
                          if (pages < 9){
                              if(index == pages){
                                  pagesText = $(element).text();
                              }
                          }else{
                              if (index == 7){
                                  pagesText = $(element).text();
                              }
                          }
                      });
                      //转到最后一页
                      if(data.pages == 2){
                          updateViewInfo(2,data.pageSize);
                      }else {
                          updateViewInfo(pagesText*1,data.pageSize);
                      }

                      //取消分页中所有高亮
                      $(".page-item").each(function () {
                          $(this).removeClass('active');
                      });
                      //将最后一个添加高亮
                      var pagelink = $(".page-link");
                      $(pagelink[pages-2]).parent().addClass('active');
                  }else{
                      updateViewInfo(1,data.pageSize);
                  }
              }
          });

      });


  </script>



</body>
</html>